<!doctype html>
<html lang="en" ng-app="StarterApp">
  <head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.css">
<link type="text/css" rel="stylesheet" href="DirectDemo.css">
    <style>
    .menuBtn {
  background-color: transparent;
  border: none;
  height: 38px;
  margin: 16px;
  position: absolute;
  width: 36px;
} 
md-toolbar h1 {
  font-size: 1.250em;
  font-weight: 400;
  margin: auto;
}
md-list .md-button {
  color: inherit;
  font-weight: 500;
  text-align: left;
  width: 100%;
}
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0; 
  position: absolute;
  width: 1px;
}

/* Using Data-URI converted from svg until <md-icon> becomes available 
https://github.com/google/material-design-icons
*/
.menuBtn {
  background: transparent url() no-repeat  center center;
}
    
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-aria.min.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angular_material/0.7.1/angular-material.min.js"></script>
    <script>
    var app = angular.module('StarterApp', ['ngMaterial']);

app.controller('AppCtrl', ['$scope', '$mdSidenav', function($scope, $mdSidenav){
  $scope.toggleSidenav = function(menuId) {
    $mdSidenav(menuId).toggle();
  };
 
}]);
</script>
<script type="text/javascript" src="demo.js"></script>
<script type="text/javascript" src="directdemo/directdemo.nocache.js"></script>

<!-- Force GWT-RPC calls to the webserver instead of the codeserver -->
<meta name="directdemo::gwt:property" content="baseUrl=http://localhost:8765/directdemo/">
  </head>
  <body layout="column">
    <md-toolbar layout="row" ng-controller="AppCtrl">
      <button ng-click="toggleSidenav('left')" hide-gt-sm class="menuBtn">
        <span class="visually-hidden">Menu</span>
      </button>
      <h1>Hello World</h1>
    </md-toolbar>
    <div layout="row" flex>
        <md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
          
        </md-sidenav>
        <div layout="column" flex id="content">
            <md-content layout="column" flex class="md-padding">
              
    		<form name="userForm" layout="column" xng-controller="DirectAngularController">
				<dm-number model='model.digits()' label='Cijfers'></dm-number>
				<dm-text model='model.letters()' label='Letters'></dm-text>
				<dm-number model='model.houseNumber()' label='Huisnummer'></dm-number>
				<dm-field model='model.postcode()' label='Postcode'>{{model.postcode().getValue()}}</dm-field>
				<dm-field model='model.result().stad()' label='Stad'>{{model.result().stad().getValue()}}</dm-field>
				<dm-field model='model.result().straat()' label='Straat'>{{model.result().straat().getValue()}}</dm-field>
			</form>
            </md-content>
        </div>
    </div>
    <!-- Angular Material Dependencies -->
  </body>
</html>